<template>
  <el-container style="background-color: #fff">
    <el-aside style="padding:0px 10px 0 0;width:260px;box-sizing: border-box" v-loading="treeLoading">
      <avue-tree :option="treeOption" :data="treeData" @node-click="handleTreeClick" style="height: calc(100% - 40px)"
        ref="treeRef" @save="handleTreeSave" @update="handleTreeUpdate" @del="handleTreeDel"></avue-tree>
    </el-aside>
    <el-main>
      <basic-crud v-model:formData="formData" v-model:search="searchFormData" :option="option" ref="basicCrudRef"
        businessUrl="/permission/deviceAccountController" :apiListParams="apiListParams" selectType="multiple"
        :apiAddParams="apiListParams" btnPermission>
        <template #menu-left>
          <el-button type="primary" icon="Plus" @click="handleOpenAdd(1)"
            v-permission="'deviceAccount-ADDBTN'">新增</el-button>
          <el-button icon="Edit" type="primary" @click="handleOpenAdd(2)"
            v-permission="'deviceAccount-ADDBASICINFOACCOUNT'">添加基本信息和台账</el-button>
          <el-button icon="Edit" type="primary" plain @click="handleOpenEditStatus"
            v-permission="'deviceAccount-DEVICECHANGESTATUS'">改状态</el-button>
        </template>
      </basic-crud>
    </el-main>
    <ChangeStatus ref="ChangeStatusRef" :refresh="changeStatusSuccess"></ChangeStatus>
    <AddDialog ref="AddDialogRef" :refresh="changeStatusSuccess" :apiListParams="apiListParams"></AddDialog>
  </el-container>
</template>

<script setup>
import { getCrudFunByBaseUrl } from '@/utils/index.js'
import { ElMessage } from 'element-plus'
import { formatDate } from "@/utils/formatTime";
import ChangeStatus from './components/ChangeStatus.vue';
import AddDialog from './components/AddDialog.vue';

// 获取左侧树的增删改查接口
const { apiAdd, apiEdit, apiDel, apiRefer } = getCrudFunByBaseUrl('/bd/deviceClassifyController')
const searchFormData = ref({})
const basicCrudRef = ref()
const treeData = ref([])
const formData = ref({})
const treeOption = ref({
  defaultExpandAll: true,
  nodeKey: 'id',
  props: {
    label: 'name',
    value: 'id',
    children: 'children',
  },
  formOption: {
    column: [
      {
        label: '编号',
        prop: 'code',
        search: true,
        rules: [{ required: true, message: '请输入编号', trigger: 'blur' }],
      },
      {
        label: '名称',
        prop: 'name',
        search: true,
        sortable: true,
        rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      },
      {
        label: '描述',
        prop: 'des',
      },
      {
        label: '排序',
        prop: 'orderNum',
        type: 'number',
        step: 10
      },
    ],
  }
})
const treeLoading = ref(true)
const handleTreeSave = (parent, data, done, loading) => {
  if (parent.key) {
    data.parentId = parent.key
  } else {
    data.parentId = 'root'
  }
  apiAdd(data).then(res => {
    ElMessage.success('新增成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  })
}

const handleTreeUpdate = (parent, data, done, loading) => {
  apiEdit(data).then(res => {
    ElMessage.success('编辑成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  })
}
const handleTreeDel = (data, done) => {
  const loadingInstance = ElLoading.service({ text: '删除中...' })
  apiDel(data.key).then(res => {
    ElMessage.success('删除成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  }).finally(() => {
    loadingInstance.close()
  })
}
// 获取树结构数据
const getTreeList = async () => {
  treeData.value = await apiRefer({}, treeLoading) || []
}

const treeRef = ref()
const apiListParams = ref({
  deviceClassify: undefined
})
const handleTreeClick = (data) => {
  basicCrudRef.value.pageData.currentPage = 1
  basicCrudRef.value.pageData.pageSize = 20
  apiListParams.value.deviceClassify = data.id
}
getTreeList()

const option = ref({
  menuWidth: 180,
  searchSpan: 8,
  addBtn: false,
  selection: true,
  column: [
    {
      label: '分类',
      prop: 'deviceClassifyName',
      width: 150,
      display: false,
      overHidden: true
    },
    {
      label: "型号/规格",
      prop: "specification",
      search: true,
      display: false,
      sortable: true,
      fixed: true,
      width: 150,
    },
    {
      label: "设备名称",
      prop: "name",
      search: true,
      display: false,
      sortable: true,
      fixed: true,
      width: 150,
    },
    {
      label: "设备编号",
      prop: "code",
      searchLabelWidth: 120,
      display: false,
      search: true,
      sortable: true,
      width: 150,
    },
    {
      label: "有效期",
      prop: "effectiveDate",
      width: 120,
      display: false,
      search: true,
      type: 'daterange',
      searchType: 'daterange',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      formatter: (val) => {
        return formatDate(val.effectiveDate, "yyyy-MM-dd");
      }
    },
    {
      label: "状态",
      prop: "status",
      sortable: true,
      search: true,
      searchType: "select",
      display: false,
      statusTag: true,
      width: 100,
      align: 'center',
      statusTypeMap:{
        fault:'danger',
        normal:'success',
        repair:'warning',
        willCheck:'warning',
        scrap:'info'
      }
    },

    {
      label: "设备类型",
      prop: "deviceCategory",
      search: true,
      sortable: true,
      type: 'select',
      searchType: 'select',
      display: false,
      dicData: [{
        label: '非标',
        value: 'unStand'
      }, {
        label: '通用',
        value: 'general'
      }],
      width: 100,
    },

    {
      label: "所属库房",
      prop: "warehouse",
      sortable: true,
      width: 150,
      display: false,
      formatter: (val) => {
        return val.warehouseName;
      },
    },
    {
      label: "存放货位",
      prop: "goodsLocation",
      sortable: true,
      width: 150,
      hide: true,
      display: false,
      formatter: (val) => {
        return val.goodsLocationName;
      },
    },
    {
      label: "设备位置",
      prop: "fixedAddress",
      sortable: true,
      display: false,
      width: 150,
    },
    {
      label: "精度/参数",
      prop: "params",
      sortable: true,
      display: false,
      width: 150,
    },
    {
      label: "品牌",
      prop: "brand",
      sortable: true,
      search: true,
      width: 150,
      display: false,
      hide: true,
      showColumn: false,
    },
    {
      label: "负责人",
      prop: "deviceAdminName",
      search: false,
      display: false,
      sortable: true,
      width: 150,
    },
    {
      label: '已提醒保养',
      prop: 'alertFlag',
      search: true,
      searchType: 'select',
      display: false,
      searchLabelWidth: 130,
      showColumn: false,
      hide: true,
      dicData: [{
        label: '是',
        value: 'true'
      }, {
        label: '否',
        value: 'false'
      }]
    },
    {
      label: "材质",
      prop: "material",
      sortable: true,
      display: false,
      width: 150,
      hide: true,
      showColumn: false,
    },
    {
      label: "适用产品",
      prop: "applyProduct",
      sortable: true,
      display: false,
      width: 150,
      showColumn: false,
    },
    {
      label: "制造/供应商",
      prop: "supplier",
      sortable: true,
      display: false,
      width: 150,
      showColumn: false,
    },
    {
      label: "单价",
      prop: "priceOfUnit",
      display: false,
      width: 80,
      hide: true,
      showColumn: false,
    },
    {
      label: "寿命",
      prop: "materialLife",
      sortable: true,
      display: false,
      showColumn: false,
      width: 150,
    },
    {
      label: "购置时间",
      prop: "buyDate",
      width: 130,
      display: false,
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
    },
    {
      label: "当前使用次数",
      prop: "currentUsedCount",
      display: false,
      width: 100
    },
    {
      label: "描述",
      prop: "des",
      type: 'textarea',
      span: 24,
      sortable: true,
      minWidth: 150
    }
  ]
})

// 修改状态
const ChangeStatusRef = ref()
const handleOpenEditStatus = () => {
  let selectedList = basicCrudRef.value.selectData
  if (selectedList.length === 0) {
    return ElMessage.warning('请选择操作的数据！')
  }
  ChangeStatusRef.value.open(selectedList)
}
// 修改成功回调
const changeStatusSuccess = () => {
  basicCrudRef.value?.getList()
  basicCrudRef.value.defaultSelectList = []
}

// 新增
const AddDialogRef = ref()
const handleOpenAdd = (type) => {
  if (!apiListParams.value.deviceClassify) {
    return ElMessage.warning('请选择左侧树节点进行操作！')
  }
  AddDialogRef.value.open(type)
}
</script>

<style lang="scss" scoped></style>
